<template>
  <div ref="srcoll"></div>
</template>

<script>
export default {
  data() {
    return {
      time: null
    };
  },
  props:{
      show:{
        type:Boolean
      }
  },
  mounted() {
    window.addEventListener("scroll", this.dome); // 页面的滚动事件
  },
  methods: {
    dome() {
      let num = this.$refs.srcoll.offsetTop;  // 最底端DOM元素距离最顶端的距离
      let aee = window.pageYOffset;           // 页面滚动卷进去的距离
      let sum = window.innerHeight;           // 浏览器视口的高度
      if (num - aee < sum) {    // 底端DOM到最顶端 - 页面卷进去的距离 < 视口高度
        if (this.show) {        // 父盒子需要传个Boolean值,防止请求发送失败
          clearTimeout(this.time);            // 防抖节流
          this.time = setTimeout(() => {
            this.$emit("change");   // 父盒子会有个change事件就是触底可以发送请求了
          }, 500);
        }
      }
    },
  },
};
</script>

<style>
</style>